<!DOCTYPE html>

<html>

<head>

	<title>修改收货人信息</title>

	<include file='public/head'>

	<style>

		.layui-legend-size{font-size:14px !important;}

		.layui-nopadding{padding:0 !important;}

		.layui-overflow{overflow:auto;}

		.layui-nomargin{margin: 0 !important;}

		.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}

		.layui-input{height:30px !important; }

		.layui-form-search-item .layui-inline{margin-bottom: 5px;} 

		.layui-form-search-item label{margin-left: 15px;}

		.layui-table-page {padding: 7px 0px 0px;}

		.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}

	</style>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>			

</head>

<body>

<form method="post" id="f">

	<input type="hidden" name="order_num" value="{$order_consignee->order_num}">

	<div class="layui-card">

		<!-- <button type="button" class="layui-btn" onclick="javascript:history.back(-1);"><i class="layui-icon layui-icon-return"></i> 返回</button> -->

		<div class="layui-card">

			<fieldset class="layui-elem-field layui-field-title layui-field-padding">

				<legend class="layui-legend-size">收货人信息</legend>

				<table  class="layui-table layui-nomargin" >

					<thead>

						<tr>

							<td>收货人</td>

							<td>手机号码</td>

							<td>邮政编码</td>

						</tr>

					</thead>

					<tbody>

						<tr>

							<td>

								<input type="text" class="layui-input" name="order_consignee_name" value="{$order_consignee->order_consignee_name}" placeholder="请输入收货人">

							</td>

							<td>

								<input type="text" class="layui-input" name="order_consignee_phone" value="{$order_consignee->order_consignee_phone}" placeholder="请输入手机号码">

							</td>

							<td>

								<input type="text" class="layui-input" name="order_consignee_postal" value="{$order_consignee->order_consignee_postal}" placeholder="请输入邮政编码">

							</td>

<!-- 							<td>

								<input type="text" class="layui-input" name="order_consignee_address" value="{$order_consignee->order_address}" placeholder="请输入收货地址">

							</td> -->

						</tr>

					</tbody>

					<thead>

						<tr>

							<td>省</td>

							<td>市</td>

							<td>区</td>

						</tr>

					</thead>

					<tr>

						<td>

							<div id="provice">

								<select name="provice" v-model="couponSelected" @change="getCouponSelected" class="layui-input">                       

								    <option :value="index" v-for="(coupon,index) in couponList" :key="index">{{coupon.label}}</option>                        

								</select>

							</div>	

						</td>

						<td>

							<div id="city">

								<select name="city" v-model="couponSelected" @change="getCouponSelected" class="layui-input">

								    <option :value="index" v-for="(coupon,index) in couponList" :key="index">{{coupon.label}}</option>                  

								</select>

							</div>

						</td>

						<td>

							<div id="district">

								<select name="district" v-model="couponSelected" @change="getCouponSelected" class="layui-input">  

								    <option :value="index" v-for="(coupon,index) in couponList" :key="index">{{coupon.label}}</option>                  

								</select>

							</div>

						</td>

					</tr>

				</table>

			</fieldset>

		</div>



	</div>

</form>



	<include file='public/scripts'>

<script type="text/javascript">


	function tijiao(){


    // $('.submit-btn').on('click',function(){

        $.ajax({

            url:"{:cmf_plugin_url('Order://admin_index/consigneeedit')}",

            type:'post',

            data:$('#f').serialize(),

			success:function(data){

				if (data.code == 1) {

					layer.msg(data.msg,{icon:1,time:1500},function(){

						window.parent.window.location.reload();

					});

				} else {

					if(data.message != null){

						layer.msg(data.message,{icon:2,time:1500});

					}

					if(data.msg != null){

						layer.msg(data.msg,{icon:2,time:1500});

					}

				}

			},

			error:function()

			{

				layer.msg('系统错误',{icon:2,time:1500});

			}

        })   

    // });
    }



    var address_list = {$address_list};

    //省列表

	var provice = new Vue({

			el: '#provice',

			data:{

				couponList:address_list,

				couponSelected: '',

			},

			created(){

				this.couponSelected = {$list['provice']};

			},

			methods:{

				getCouponSelected(){

					city.couponList = address_list[this.couponSelected]['children'];

					district.couponList = city.couponList[0]['children'];

			}

		}

	}); 



	//城市列表

	var city_list = address_list[{$list['provice']}]['children'];

	var city = new Vue({

		el:'#city',

		data:{

			couponList:city_list,

			couponSelected: '',	

		},

		created(){

			//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现

			this.couponSelected = {$list['city']};

		},

		methods:{

			getCouponSelected(){

				district.couponList = this.couponList[this.couponSelected]['children'];

			}

		}		

	});



	//区列表

	var district_list = city_list[{$list['city']}]['children'];

	var district = new Vue({

		el:'#district',

		data:{

			couponList:district_list,

			couponSelected: '',	

		},

		created(){

			//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现

			this.couponSelected = {$list['district']};

		},

		methods:{

			getCouponSelected(){



			}

		}		

	});





</script>

</body>

</html>	